<template>
  <div class="mark-content">
    <v-md-editor
        v-model="value"
        :left-toolbar="leftToolbar"
        :toolbar="toolbar"
        @change="onChange"
        height="300px"></v-md-editor>
    <div class="mark-foot">
      <div title="点击可获取语法提示">
        <Dialog />
      </div>
      <a-button type="primary" @click="onSubmit">发表留言</a-button>
    </div>
  </div>

</template>

<script>
import Dialog from './dialog.vue'

//官方API：https://ckang1229.gitee.io/vue-markdown-editor/zh/
export default {
  name: "vue-markdown-editor",
  components:{
    Dialog
  },
  props: {
    value: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      //左侧工具栏
      leftToolbar: 'undo redo clear |  bold italic strikethrough quote | ul ol table hr |emoji link image customCode  ',
      //自定义工具栏配置
      toolbar: {
        customCode: {
          title: '代码块',
          icon: 'v-md-icon-code',
          action(editor) {
            editor.insert(function (selected) {
              const prefix = '``` \n';
              const suffix = '\n ```';
              const placeholder = '代码块';
              const content = selected || placeholder;
              return {
                text: `${prefix}${content}${suffix}`,
                selected: content,
              };
            });
          },
        },
        textarea: ''
      },
      visible:false
    }
  },
  methods: {
    //text 为输入的内容，html 为解析之后的 html 字符串
    onChange(text, html) {
      this.$emit('onChange', text, html)
    },
    onSubmit() {
      this.$emit('onSubmit', this.value)
    },
   // clearVal() {
   //   console.log('clearVal clearVal')
   //   this.value = ''
   //  },
  }
}
</script>

<style scoped>
.mark-content {
  border: 1px solid #ddd;
  border-radius: 5px;
}

.mark-foot {
  width: 100%;
  height: 45px;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
</style>